<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #table{
            border: 1px solid #000;
            width: 602px;
            margin: 20px auto;
        }
         td{
            display: inline-block;
            width: 100px;
            text-align: center;
            margin-bottom: 20px;
        }
        input{
            width: 30px;
        }
        .td{
            width: 300px;
            
        }
        #deleAll{
            width: 60px
        }

    </style>
</head>
<body>
    <table id="table" cellspacing="0">
        <form action="" id="form">
            <thead>
                <tr id="tr1">
                    <td> <label for="checkbox">全选</label><input type="checkbox" name="" id="checkbox"></td>
                    <td>商品名称</td>
                    <td>单价</td>
                    <td>数量</td>
                    <td>单品总价</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody id="tb">
                <tr id="tr2">
                    <td><input type="checkbox" name="checkbox1" id="checkbox1"></td>
                    <td>鞋子</td>
                    <td>120</td>
                    <td><input type="button" id="jian" value="-" ><input type="text" id="shuzi" value="1" readonly><input type="button" id="jia" value="+" ></td>
                    <td>120</td>
                    <td><input type="button" id="dele" value="删除" ></td>
                </tr>
                <tr id="tr3">
                    <td><input type="checkbox" name="checkbox1" id="checkbox1"></td>
                    <td>鞋子2</td>
                    <td>120</td>
                    <td><input type="button" id="jian2" value="-" ><input type="text" id="shuzi2" value="1" readonly><input type="button" id="jia2" value="+" ></td>
                    <td>120</td>
                    <td><input type="button" id="dele2" value="删除" ></td>
                </tr>
                <tr class="tr" id="tr4">
                    <td colspan="3"><input type="button" id="deleAll" value="删除所选"></td>
                    <td colspan="3" class="td">商品总价（不含运费）：<label id="total" class="yellow"></label> 元</td>

                </tr>
            </tbody>
        </form>
    </table>
    <script>
        function $(id){
            return document.getElementById(id)
        }
        // function $(name){
        //     return document.getElementsByName(name)
        // }
        $('checkbox').onclick=function(){
            var oInput=document.getElementsByName("checkbox1");
            for(var i=0;i<oInput.length;i++){
                oInput[i].checked=this.checked;
            }
            jisuan();
        }
        function fun(text,num){
            if(num==$('jian')){
                num.onclick=function(){
            if(text.value<=1){
            alert('不能为0!!!');
            return false;
            }else{
                text.value=parseInt(text.value-1);
                jisuan();
            }
         } 
        }else{
            num.onclick=function(){
            text.value=parseInt(text.value)+1;
            jisuan();
            // console.log(jisuan());
            
         }        
        }
    }
        fun($('shuzi'),$('jian'));
        fun($('shuzi'),$('jia'));
        function fun2(text,num){
            if(num==$('jian2')){
                num.onclick=function(){
            if(text.value<=1){
            alert('不能为0!!!');
            return false;
            }else{
                text.value=parseInt(text.value)-1;
                jisuan();
            }
         } 
        }else{
            num.onclick=function(){
            text.value=parseInt(text.value)+1;
            jisuan();
         }        
        }
    }
        fun2($('shuzi2'),$('jian2'));
        fun2($('shuzi2'),$('jia2'));
        function jisuan(){
            var number;
            var jiage;
            var sum=0;
            var hang=$('table').getElementsByTagName('tr');
            // console.log(hang.length);
            if(hang.length>0){
                for(var j=1;j<hang.length;j++){
                    if(hang[j].getElementsByTagName('td').length>2){
                        // console.log(hang[j].getElementsByTagName('td').length);
                        number=hang[j].getElementsByTagName('td')[3].getElementsByTagName('input')[1].value;
                        //console.log(number);
                        jiage=hang[j].getElementsByTagName('td')[2].innerText*number;
                         //console.log(jiage);
                        hang[j].getElementsByTagName('td')[4].innerText=jiage;
                        //console.log(hang[j].getElementsByTagName('td')[4].innerText);
                        sum+=jiage;
                         //console.log(sum);
                    }
                }
                $('total').innerText=sum;
            }
    }
    function dele(d,rowId){
        // var tr=document.getElementsByTagName('tr')
        //console.log(Index);
        d.onclick=function(){
            var tr=rowId.rowIndex;
            console.log(tr);
            $('table').deleteRow(tr);
            // $('table').deleteRow(tr-1);
            jisuan();
        }
    }
    dele($('dele'),$('tr2'));
    dele($('dele2'),$('tr3'));

     $('deleAll').onclick=dele2;

  
    function dele2(){
        var oInput=document.getElementsByName("checkbox1");
        var tr=$('tb').getElementsByTagName('tr')
        
        //console.log($('deleAll'));
        for(var i=oInput.length-1;i>=0;i--){
          // console.log(oInput);
            if(oInput[i].checked){
                //console.log(oInput[i])
                //console.log(oInput[i].checked);
              
                //console.log(tr);
                $('tb').removeChild(tr[i]);
            //    dele();
            }
        }jisuan();
    }



    // $('dele').onclick=function(){
    //     var tr=$('tr2').rowIndex;
    //      //console.log(tr);
    //     $('table').deleteRow(tr);
    //     jisuan();

    // }
    // $('dele2').onclick=function(){
    //     var tr=$('tr3').rowIndex;
    //      //console.log(tr);
    //     $('table').deleteRow(tr);
    //     jisuan();

    // }
    // $('jian').onclick=function(){
    //     if($('shuzi').value<=1){
    //         alert('不能为0!!!');
    //     }
    // }
       
    </script>
</body>
</html>